<template>
	<view class="good-plus">
		<block v-if="good.is_c_out">
			<text style="font-size: 26upx">已售罄</text>
		</block>
		<block v-else>
			<!--产品单规格 或者购物车 直接增加-->
			<view class="plus-item" v-if="good.is_select || isCart">
				<u-number-box v-if="good.is_select || isCart" :showMinus="getProductQty(good) > 0" step="1" :min="0">
					<view slot="minus" class="minus" @click="changeCart('-', good)">
						<u-icon name="minus" size="26rpx"></u-icon>
					</view>
					<text slot="input" :style="{
                            width: '60rpx',
                            textAlign: 'center',
                            display: getProductQty(good) > 0 ? 'block' : 'none', }" class="input">
						{{ getProductQty(good) }}
					</text>
					<view slot="plus" class="plus" @click="changeCart('+', good)">
						<u-icon name="plus" color="#FFFFFF" size="26rpx"></u-icon>
					</view>
				</u-number-box>

				<u-number-box v-else value="0" step="1" :min="0" :showMinus="false">
					<text slot="input" :style="{
                            width: '60rpx',
                            textAlign: 'center',
                            display: 'none',
                        }" class="input">
						0
					</text>
					<view slot="plus" class="plus" @click="changeCart('+', good)">
						<u-icon name="plus" color="#FFFFFF" size="26rpx"></u-icon>
					</view>
				</u-number-box>
			</view>
			<!--多规格进行添加-->
			<view class="plus-item" v-else>
				<view class="u-page__button-item">
					<u-button text="选规格" size="small" plain shape="circle" color="#f9ae3d" iconColor="#f9ae3d"
						@click="specSelect(good)"></u-button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"; //引入mapState
	import _ from "lodash"
	import pageApi from "@/api/page"
	export default {
		props: {
			good: {
				default () {
					return [];
				},
			},
			isCart: {
				type: Boolean,
				default () {
					return false;
				},
			},
			cartInfoIndex: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
        showGoodSelect: (state) => state.page.showGoodSelect,
				cartGoods: (state) => state.ordering.cartGoods,
				cart_info: (state) => state.cart.cart_info, // 购物车详情
				order_info: (state) => state.cart.order_info // 订单详情
			}),
			// 当前这个产品是否可以添加到购物车
			hasAddCart(product) {
				const cart_info = _.cloneDeepWith(cart_info)
				// 不可以直接加入购物车
				if (!product.is_select) {
					return false
				}
				let cartHasProduct = false
				let unit = product.units
				if (unit.length <= 0) {
					return false
				}
				_.each(cart_info, (item, index) => {
					if (item.product_no == product.product_no && item.unit_product_no == unit[0].unit_product_no) {
						cartHasProduct = true
					}
				})
				return cartHasProduct
			},
		},
		methods: {
			// 仅计算可以直接加入购物车的产品
			getProductQty(good) {
				let qty = 0
				if (this.isCart) {
          return good.qty
				}
				_.each(this.cart_info, item => {
					if (good.product_no == item.product_no) {
						qty = item.qty
					}
				})
				return qty
			},
			/**
			 * 列表中进行购物车商品追加
			 * @param tyle
			 * @param good_tmp
			 */
			changeCart(tyle, product, index) {
				const cart_info = _.cloneDeepWith(this.cart_info)
				// 购物车中的加减
				if (this.isCart) {
					switch (tyle) {
						case '-':
							cart_info[this.cartInfoIndex].qty -= 1
              if (cart_info[this.cartInfoIndex].qty <= 0) {
                console.log('======delete======')
                // 删除这一条
                cart_info.splice(this.cartInfoIndex, 1)
                break
              }
							break;
						case '+':
							cart_info[this.cartInfoIndex].qty += 1
							break;
						default:
							break;
					}
          console.log(6666666)
          console.log(this.cartInfoIndex)
          console.log(cart_info)
					// 进行入购物车
					pageApi.addCart({
						order_info: this.order_info,
						cart_info: cart_info
					}).then(res => {
						if (res.code == 200) {
							this.$store.commit('cart/setCartInfo', res.data.cart_info)
							this.$store.commit('cart/setOrderInfo', res.data.order_info)
							uni.$emit("changeCart");
						}
					})
					return false
				}

				let unit = product.units
				if (unit.length <= 0) {
					// 进行错误提示
					uni.showToast({
						title: "产品规格设置有误",
						icon: "error"
					})
					return false
				}

				// 代表单规格，直接加入购物车
				if (product.is_select) {
					unit = unit[0]
					// 查询购物车中是否有这个产品
					let hasProduct = false
					_.each(cart_info, (item, index) => {
						if (item.product_no == product.product_no && item.unit_product_no == unit.unit_product_no) {
              tyle == "+" ? item.qty += 1 : item.qty -= 1
							hasProduct = true
						}
					})
					// 购物车进行产品追加
					if (!hasProduct) {
						let condimentArr = []
						_.map(product.condiment_group, (condiment_group_item) => {
							_.map(condiment_group_item.condiment, (condiment) => {
								condimentArr.push({
									condiment_name: condiment.condiment_name,
									condiment_no: condiment.condiment_no,
									inv_qty: condiment.inv_qty,
									price: condiment.price
								})
							})
						})
						cart_info.push({
							"product_no": product.product_no,
							"product_name": product.product_name,
							"alt_name1": product.alt_name1,
							"unit_product_no": unit.unit_product_no,
							"unit_name": unit.unit_name,
							"price": unit.price,
							"current_price": unit.current_price,
							"vip_price": unit.vip_price,
							"tag": unit.tag,
							"qty": 1,
							"box_price": unit.box_price,
							"condiment": condimentArr,
							"combos": product.combos,
							"non_product": true,
							"product_kind": product.product_kind,
              "bargain_no": product.bargain_no,
              "product_set_calc": product.product_set_calc
						})
					}
					// 进行入购物车
					pageApi.addCart({
						order_info: this.order_info,
						cart_info: cart_info
					}).then(res => {
						if (res.code == 200) {
							this.$store.commit('cart/setCartInfo', res.data.cart_info)
							this.$store.commit('cart/setOrderInfo', res.data.order_info)
						}
					})
				}

				// 判断购物车是否有相同产品，相同规格 和 相同 调味

				return false
				if (this.cartGoods["_" + good.id] == undefined) {
					this.$set(this.cartGoods, "_" + good.id, good);
				}
				let goodItem = this.cartGoods["_" + good.id];
				if (this.cartGoods["_" + good.id].number == undefined) {
					this.$set(goodItem, "number", 1);
					if (good.isSpec) {
						this.$set(goodItem.spceGoods[good.spec_key], "number", 1);
					}
				} else {
					switch (tyle) {
						case "+":
							goodItem.number++;
							if (good.isSpec) {
								goodItem.spceGoods[good.spec_key].number++;
							}
							break;
						case "-":
							goodItem.number--;
							if (good.isSpec) {
								goodItem.spceGoods[good.spec_key].number--;
							}
							break;
					}
				}
				setTimeout(() => {
					this.$store.commit("ordering/setCartStructure");
					uni.$emit("changeCart");
				}, 0);
			},
      // 选择规格
			specSelect(good) {
				console.log(good)
        const self = this
				if (!good.is_select) {
					setTimeout(() => {
            self.$emit("specSelect", good);
					},0);
				}
			},
			specMinus(good) {
				const spceGoodsKeys = Object.keys(this.cartGoods["_" + good.id].spceGoods);
				if (spceGoodsKeys.length == 1) {
					for (let key in this.cartGoods["_" + good.id].spceGoods) {
						this.cartGoods["_" + good.id].number--;
						this.cartGoods["_" + good.id].spceGoods[key].number--;
					}
					this.$store.commit("ordering/setCartStructure");
				} else {
					uni.showToast({
						title: "不同规格的商品需在购物车减购",
						duration: 2000,
					});
					setTimeout(() => {
						uni.$emit("changeCart", true);
					}, 0);
				}
			},
		},
	};
</script>

<style lang="scss">
	.good-plus {
		float: right;
	}

	.specs-plus-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.minus {
		width: 40rpx;
		height: 40rpx;
		border-width: 1px;
		border-color: #e6e6e6;
		border-top-left-radius: 100rpx;
		border-top-right-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: #ccc 1rpx solid;
	}

	.plus {
		width: 40rpx;
		height: 40rpx;
		background-color: #f9ae3d;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
